<template>
	<view class="pad-lr-20 pad-tb-20 content">
		<view class="fontSize-30 col-6" v-if="info">当前自提点</view>
		<view class="display align-items pad-tb-20 border_bottom_F1" v-if="info">
			<image :src="info?.cover" class="proudct-item-icon-6 radius-8" mode=""></image>
			<view class="ml20 right_view">
				<view class="fontSize-28 text-clamp-2 name">{{info?.name}}</view>
				<view class="display-sb align-items fontSize-26 col-6">
					<view class="">{{info?.address}}</view>
					<view class="display align-items">
						<image src="/static/img/icon_juli.png" class="proudct-item-icon-24" mode=""></image>
						<text class="ml10">{{info?.distance}}km</text>
					</view>
				</view>
			</view>
		</view>
		<view class="mar-top-30 display-sb align-items">
			<view class="display align-items pad-lr-12 nav_chile">
				<image src="/static/img/icon_dingwei.png" class="proudct-item-icon-15" mode=""></image>
				<view class="ml12 fontSize-30">{{address}}</view>
				<image src="/static/img/icon_jiantou_xia.png" class="wid-hig-20 ml12" mode=""></image>
			</view>
			<view class="bgf6 pad-lr-20 pad-tb-14 radius-36 display-sb align-items">
				<image src="/static/img/icon_sousuo.png" class="proudct-item-icon-24" mode=""></image>
				<input type="text" class="ipt fontSize-26" v-model="keyword" placeholder="搜索门店名称" @confirm="iptchange" />
			</view>
		</view>
		
		<view class="display align-items pad-tb-20 border_bottom_F1" v-for="item in List" :key="item.id" @click="selectshop(item)">
			<image :src="item.cover" class="proudct-item-icon-6 radius-8" mode=""></image>
			<view class="ml20 right_view">
				<rich-text :nodes="keyWordchangeColor(keyword,item.name)" class="fontSize-28 text-clamp-2 name"></rich-text>
				<view class="display-sb align-items fontSize-26 col-6">
					<view class="">{{item.address}}</view>
					<view class="display align-items" @click.stop="gomap(item)">
						<image src="/static/img/icon_juli.png" class="proudct-item-icon-24" mode=""></image>
						<text class="ml10">{{item.distance}}km</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="poFi col-f fontSize-32 text-align-center qury_btn radius-40">
			确认
		</view> -->
	</view>
</template>

<script lang="ts" setup>
// import {pickup_list,pickup_search} from '@/utils/api'
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
onLoad((options)=>{
	address.value = uni.getStorageSync('address')
	if(options.info){
	info.value = JSON.parse(options.info)
	}
	_pickup_list()
})
const info = ref()//已选择自提点
const address = ref()//当前位置
const List = ref()//自提点列表
const keyword = ref()//搜索关键字
const _pickup_list = () =>{
	pickup_list({
		user_lng:uni.getStorageSync('lng'),
		user_lat:uni.getStorageSync('lat'),
	}).then(res=>{
		if(res.code==1){
			List.value = res.data.list
		}
	})
}
const iptchange =() =>{
	if(!keyword.value){
		_pickup_list()
		return
	}
	pickup_search({
		keyword:keyword.value,
		user_lng:uni.getStorageSync('lng'),
		user_lat:uni.getStorageSync('lat'),
	}).then(res=>{
		if(res.code==1){
			List.value = res.data.list
		}
	})
}
const keyWordchangeColor = (kw:string|number, str:string|number)=>{
	// kw 传入的关键字 str 需要检索关键字的字符串
	const reg = new RegExp(kw, 'ig'); // ig 是所有的意思 而非在发现第一个匹配项时立即停止
	// 使用replace方法替换元素产生高亮
	return str.replace(reg, (match) => `<span style="color:#D92129">${match}</span>`);
}
//导航
const gomap =(info) =>{
	uni.openLocation({
		latitude:Number(info.lat),
		longitude:Number(info.lng),
		address:info.address,
		name:info.name
	})
}
const selectshop =(info) =>{
	uni.$emit('selectshop',info)
	uni.navigateBack({delta:1})
}
</script>

<style lang="scss">
@import 'pickup.scss';
</style>
